<template>
	<div>
		<!-- 上部 -->
		<div style="display: flex;">
			<div @click="back" style="width: 85vw;height: 5vh;text-align: left;line-height: 5vh;">
				<van-icon name="arrow-left" size="20" />
			</div>
			<div  style="margin-left: 2vw; width: 5vw;height: 5vh;text-align: left;line-height: 5vh;">
				<van-icon name="share-o" size="20" @click="share"/>
			<van-popup v-model="show" round position="bottom" :style="{ height: '20%' }" >
			    <div style="width: 100vw;height: 8vh;font-size: 1.5rem;text-align: center;line-height: 8vh;">分享至</div>
			    <div style="width: 100vw;height: 10vh;display: flex;justify-content: space-around;">
					<div style="width: 30vw;height: 10vh;text-align: center;"><img style="width: 15vw;height: 8vh;" src="../../../public/微信图标1.png" ></div>
					<div style="width: 30vw;height: 10vh;text-align: center;"><img style="width: 14vw;height: 7vh;" src="../../../public/微博图标1.png" ></div>
					<div style="width: 30vw;height: 10vh;text-align: center;"><img style="width: 15vw;height: 8vh;" src="../../../public/QQ图标1.png" ></div>
				</div>
			</van-popup>	
				

				
			</div>
			<div style="width: 5vw;height: 5vh;text-align: left;line-height: 5vh;">
				<van-icon name="qr-invalid" size="20" />
			</div>
		</div>
		<div style="width: 100vw;height: 50vh;">
			<!-- <img v-lazy="url+list.original_img" style="width: 100vw;height: 50vh;"> -->
			<van-swipe @change="onChange" :autoplay="2000">
				<van-swipe-item v-for="item in lists">
					<img v-lazy="url+item.image_url" style="width: 100vw;height: 50vh;">

				</van-swipe-item>

				<template #indicator>
					<div class="custom-indicator">{{ current + 1 }}/4</div>
				</template>
			</van-swipe>



		</div>

		<div style="width: 100vw;display: flex;">
			<div style="width: 70vw;text-align: left;font-size: 18px;color: red;">
				￥{{list.market_price}}
			</div>
			<div style="width: 20vw;margin-left: 10vw;" v-if="xx" >
				<img src="../../../public/收藏(1).png" style="width: 5vw;height: 3vh;" @click="sc(id)">
			</div>
			<div style="width: 20vw;margin-left: 10vw;" v-else >
				<img src="../../../public/收藏(2).png" style="width: 5vw;height: 3vh;"  @click="sc(id)">
			</div>
		</div>

		<!-- 详情 -->
		<div style="width: 100vw;font-size: 18px;font-weight: bold;text-align: left;margin-top: 2vh;">
			{{list.goods_name}}
		</div>
		<!-- 关键字 -->
		<div>{{list.keywords}}</div>



		<!-- 浏览次数 -->
		<div class="name">
			{{list.goods_name}} &nbsp;
			{{list.goods_sn}}
		</div>
		<!-- 包邮 -->
		<div style="text-align: left;font-size: 10px;color: #999;margin-top: 1vh;">快递:{{this.free}}</div>
		<div class="shop_detail">
			{{list.goods_remark}}
		</div>
		<div class="sales">
			<div>
				浏览次数：{{list.click_count}}
			</div>
			<div>
				库存：{{list.store_count}}
			</div>
		</div>
		<div class="sales">
			<div>
				销售量：{{list.sales_sum}}
			</div>
			<div>
				总评论：{{list.comment_count}}
			</div>
		</div>

		<!-- 详细描述 -->
		<!-- <div v-html="content"> -->
		<div class="datils">
			<div class="box" v-html="message"></div>
		</div>


		<!-- 导航栏 -->
		<van-goods-action>
			<van-goods-action-icon color="#FE856A" icon="chat-o" text="客服" />
			<van-goods-action-icon color="#FE856A" icon="shop-o" text="店铺" />
			<van-goods-action-button color="#FE856A" type="warning" text="加入购物车" @click="addcart" />
			<van-goods-action-button color="#F5932A" type="danger" text="立即购买" />
		</van-goods-action>

		<!-- <div v-if="CTN">
			<ShopCTN :list="list"></ShopCTN>
		</div> -->
	</div>


</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import ShopCTN from './ShopCTN.vue'
	export default {
		components: {
			ShopCTN
		},
		data() {
			return {
				xx:true,
				list: {},
				url: '',
				goods_id: '',
				current: 0,
				lists: [],
				free: '',
				message: '',
				add_id: '',
				member_id: '',
				CTN: false,
				show:false,
				id:'',
				vuex:[],
				sss:[]
			}
		},
		mounted() {
			if(JSON.parse(localStorage.getItem('sc')) ){
				this.vuex=JSON.parse(localStorage.getItem('sc')) 
			}
		},
		methods: {
			sc(id){
				if(this.xx==false){
					this.xx=true
					this.sss.map((v)=>{
						// console.log(v,111)
						// console.log(this.id,1111)
						// console.log(v.goods_id,222)
						if(this.id==v.goods_id){
							// localStorage.removeItem('sc')
							console.log(1111)
							this.sss.splice(v,1)
						}
						localStorage.setItem('sc',JSON.stringify(this.sss))
					})

				}else{
					// sconsole.log(id)
					this.xx=false
					// console.log(goods_id)
					if (this.vuex.indexOf(id) === -1) {
						this.list.xx=false
						this.vuex.push(this.list)
						// console.log(this.vuex,666)
						// this.vuex.xx=false
						// // 截取
						// this.vuex = this.vuex.slice(0, 10)
						// 转换为JSON的字符串
						localStorage.setItem('sc', JSON.stringify(this.vuex))
					}
				}
			},
			
			back() {
				this.$router.go(-1)
			},
			addcart() {
				this.CTN = true

				let data={data:this.add_id,member_id:this.member_id}
				// 消息提示
				this.$message({
				     message: '恭喜你，添加成功',
				      type: 'success'
				   });

				// 添加购物车
				this.list.member_id=this.member_id
				this.$store.dispatch("user/Add_Cart", this.list).then(e => {
					// console.log(e,123456)
					// console.log(this.member_id,7899)
					// console.log(this.add_id,111)

				})
			},
			share(){
				this.show=true
			},
			onChange(index) {
				this.current = index;
			},
			click1() {
				this.message = this.escapeHtml(this.message)
			},
			escapeHtml(str) {
				var arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
		},
		created() {
		
			
			
			let userInfo = JSON.parse(localStorage.getItem('userInfo'))
			this.member_id = userInfo.member_id

			this.$store.dispatch("user/Home_Url").then(e => {
				// console.log(e, 111)
				this.url = e
			})

			let id = this.$route.query.goods_id
			this.goods_id = id
			// console.log(this.goods_id)
			// 详情
			this.$store.dispatch("user/Get_Details", id).then(e => {
				// console.log(e, 5555)
				
				this.list = e.data.data
				// console.log(this.list,5999)
				this.id=e.data.data.goods_id
				// console.log(this.id)
				// console.log(this.list,666)
				this.add_id = this.list.goods_id
				// this.shoplist.number_id=1
				// this.shoplist.goods_name = this.list.goods_name

				// console.log(this.list.goods_id,566)
				  this.sss=JSON.parse(localStorage.getItem('sc'))
				 // console.log(sss,5555)
				 // console.log(this.list.goods_id,588)
				this.sss.map((v)=>{
					
					// console.log(v.goods_id,123)
					if(v.goods_id==this.list.goods_id){
						// console.log(2222)
						this.xx=false
					}
					
				})
				

				// console.log(this.shoplist, 88)
				this.lists = e.data.data.imgList
				this.message = e.data.data.goods_content
				this.click1()
				if (this.list.is_free_shipping == 0) {
					this.free = "免运费"
				} else {
					this.free = "不包邮"
				}
			})
		}




	}
</script>

<style>
	.custom-indicator {
		position: absolute;
		right: 5px;
		bottom: 5px;
		padding: 2px 5px;
		font-size: 12px;
		background: rgba(0, 0, 0, 0.1);
	}

	.datils {
		font-size: 0.3rem;
		text-align: left;
	}

	.datils img {
		width: 100%;

	}

	.sales {
		display: flex;
		flex-wrap: wrap;
		font-size: 0.3rem;
		justify-content: space-between;
		line-height: 4vh;
	}

	.name {
		text-align: left;
		font-weight: bold;
		font-size: 0.4rem;
	}

	.shop_detail {
		font-size: 0.3rem;
		color: #999999;
		text-align: left;
		line-height: 4vh;
	}
</style>
